<template>
    <div id="left_menu">
        <vue-particle-line class="banner-wraper">
            <div class="menu_name">
                <el-dropdown>
                <span class="el-dropdown-link">
                  <el-image class="avatar" :src="avatar" :fit="fit"></el-image>
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <router-link v-if="is_show" to="/admin/signin">
                                <li class="dropdown_li">
                                    <span class="top">登录/注册</span>
                                </li>
                            </router-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <router-link to="#">
                                <li class="dropdown_li">
                                    <span class="top">修改资料</span>
                                </li>
                            </router-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <router-link v-if="!is_show" to="/admin/signin">
                                <li class="dropdown_li">
                                    <span @click="clearCookie" class="top">退出登录</span>
                                </li>
                            </router-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <nav>
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" text-color="white" background-color=rgba(0,0,0,0.1)>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">首页功能</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-3">
                                <router-link to="/" class="left_menu">
                                    首页
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="1-3">
                                <router-link to="/about" class="left_menu">
                                    关于
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <span slot="title">后台</span>
                            <el-menu-item index="1-4-1">
                                <router-link to="/" class="left_menu">
                                    首页
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-4-3">
                                <router-link to="/admin/articleList" class="left_menu">
                                    文章管理
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-4-4">
                                <router-link to="/admin/articleEdit" class="left_menu">
                                    文章发表
                                </router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">资源下载</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">留言板</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">相册</span>
                    </el-menu-item>
                </el-menu>
            </nav>
        </vue-particle-line>

    </div>
</template>

<script>
    export default {
        name: 'sidebar',
        data() {
            return {
                articleNumber: '',
                flag: false,
                img: '',
                title: '逆月翎',
                is_show: true,
                avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            }
        },
        mounted: function() {
            var userInfo = JSON.parse(localStorage.getItem('user'));
            if (userInfo) {
                this.is_show = false;
                this.avatar = userInfo.avatar;
            }
        },
        methods: {
            clearCookie() {
                console.log('清除缓存成功!');
                localStorage.removeItem('user');
            }
        }
    }
</script>

<style scoped>

    .left_menu:hover {
        color: black;
    }

    #left_menu {
        float: left;
        width: 15%;
        margin-right: 20px;
    }

    @media (max-width: 767px) {
        #left_menu {
            display: none;
        }
    }

    nav {
        padding: 20px 0;
    }

    .info img {
        width: 120px;
        height: 120px;
    }

    .archive .archive_count {
        display: block;
        color: #222;
        font-weight: 600;
        font-size: 16px;
    }

    .archive .archive_name {
        display: block;
        color: #999;
        font-size: 14px;
    }

    .active img {
        position: absolute;
        top: -145px;
        left: 35px;
    }

    a {
        color: white;
    }

    .dropdown_li {
        color: black;
    }

    .avatar {
        width: 60px;
        height: 55px;
        background-size: cover;
        border-radius: 100px;
    }

    span,
    .left_menu {
        color: white;
    }

    .top {
        color: black;
    }
</style>
